<template>
  <div>
    <!-- 面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>NOKIA</el-breadcrumb-item>
      <el-breadcrumb-item>Label ChekIn and Out</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select v-model='searchForm.Action'
                     placeholder='请选择Action'
                     style="width: 100%;"
                     @change="actionChange">
            <el-option v-for='item in actionOptions'
                       :key='item.value'
                       :label='item.label'
                       :value='item.value'>
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="请刷入SN"
                    id='serialNumber'
                    v-model="searchForm.SerialNumber"
                    @keyup.enter.native="changeFoucus"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input id='errorcode'
                    placeholder="请刷入errorcode"
                    v-model="searchForm.ErrorCode"
                    @keyup.enter.native="addIntoWaitingList"
                    v-show='ErrorcodeVisable'>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary"
                     @click='batchAccordCurrentProcess'>批量通过</el-button>
        </el-col>
      </el-row>
      <el-table :data="LabelIssueList"
                :border="true"
                :stripe="true"
                :header-cell-style="{'text-align':'center','font-weight':'700','color':'#606266'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="料号"
                         prop="PART_NO"></el-table-column>
        <el-table-column label="工单"
                         prop="WO_NO"></el-table-column>
        <el-table-column label="线别"
                         prop="PD_LINE"></el-table-column>
        <el-table-column label="站点"
                         prop="PROCESS_NAME"></el-table-column>
        <el-table-column label="Terminate"
                         prop="TERMINAL_NAME"></el-table-column>
        <el-table-column label="Serial Number"
                         prop="SERIAL_NUMBER"></el-table-column>
        <el-table-column label="不良代码"
                         prop="ERRORCODE"></el-table-column>
        <el-table-column label="不良原因"
                         prop="ERROR_DESC"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click="removeFromWaitingList(scope.row.SERIAL_NUMBER)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchForm: {
        Action: '',
        SerialNumber: '',
        ErrorCode: ''
      },
      ErrorcodeVisable: true,
      actionOptions: [],
      LabelIssueList: []
    }
  },
  methods: {
    async changeFoucus () {
      // 检查SN是否是Fail状态,如果是Fail的状态则报错
      // 1.接口
      if (!this.searchForm.Action) {
        return this.$message.error('请选择具体操作类型')
      }
      if (!this.searchForm.SerialNumber) {
        return this.$message.error('SerialNumber栏位不能为空')
      }
      const { data: res } = await this.$http.post('/Nokia/NokiaInfo/CheckSN', this.searchForm)
      if (res.meta.status !== 200) {
        const currentSerialNumber = this.searchForm.SerialNumber
        this.searchForm.SerialNumber = ''
        document.getElementById('serialNumber').focus()
        return this.$message.error(`${currentSerialNumber}不允许执行${this.searchForm.Action}`)
      }
      // 如果errorcode栏位为空,则焦点到errorcode上面
      if (this.searchForm.Action === 'Nokia CheckIn') {
        if (this.searchForm.ErrorCode === '') {
          document.getElementById('errorcode').focus()
        } else {
          this.addIntoWaitingList()
        }
      } else { // 如果是check Inspection或者是check out 那么直接将SN加入到waitingList
        const { data: res } = await
          this.$http.post('/Nokia/NokiaInfo/ReturnSNInfo', this.searchForm)

        if (res.meta.status !== 200) {
          return this.$message.error(`未能获取SN:${this.searchForm.SerialNumber}的相关信息,请检查`)
        }

        this.LabelIssueList.push({
          PART_NO: res.data.PART_NO,
          WO_NO: res.data.WO_NO,
          PD_LINE: res.data.PD_LINE,
          SERIAL_NUMBER: this.searchForm.SerialNumber,
          ERRORCODE: res.data.ERRORCODE,
          ERROR_DESC: res.data.ERROR_DESC,
          PROCESS_NAME: res.data.PROCESS_NAME,
          TERMINAL_NAME: res.data.TERMINAL_NAME
        })
        this.searchForm.SerialNumber = ''
      }
    },
    // 根据用户获取到具体的选择权限
    async serachActionPermissionByID (loginId) {
      if (loginId) {
        // 根据登录的用户的工号,判断有什么权限
        const { data: res } = await this.$http.get('/Nokia/NokiaInfo/CheckPrivilege', {
          params: {
            emp: loginId
          }
        })
        console.log(res.meta.status)
        if (res.meta.status !== 200) {
          return this.$message.error(`未能获取工号${loginId}的权限信息,请检查`)
        }
        const that = this
        res.data.DO_ACTIOM.forEach(function (item, index, arr) {
          that.actionOptions.push({
            label: item,
            value: item
          })
        })
      } else {
        window.sessionStorage.clear()
        this.$router.push('/login')
        return this.$message.error('找不到用户信息,请重新登录')
      }
    },
    async addIntoWaitingList () {
      if (!this.searchForm.Action) {
        return this.$message.error('请选择具体操作类型')
      }
      if (!this.searchForm.SerialNumber) {
        document.getElementById('serialNumber').focus()
        return this.$message.error('SerialNumber栏位不能为空')
      }
      const currentSerialNumber = this.searchForm.SerialNumber
      // const that = this // 在foreach中 this是指向该array 所以要先改名下
      // 判断刷入的SERIAL_NUMBER是否已经刷入,如果刷入过则清空并报错
      let checkSNAddExisting = false
      this.LabelIssueList.forEach(function (item, index, arr) {
        if (item.SERIAL_NUMBER === currentSerialNumber) {
          checkSNAddExisting = true
        }
      })
      // 检查到waiting list里面存在该SN 则移除掉
      if (checkSNAddExisting) {
        this.searchForm.SerialNumber = ''
        this.searchForm.ErrorCode = ''
        document.getElementById('serialNumber').focus()
        return this.$message.error(`该SN:${currentSerialNumber} 已经刷入。不允许重复输入`)
      }
      // 根据SN找到工单,料号。根据刷入的errorcode找到对应的errorcode信息
      const { data: res } = await
        this.$http.post('/Nokia/NokiaInfo/ReturnSNInfo', this.searchForm)

      if (res.meta.status !== 200) {
        return this.$message.error(`未能获取SN:${this.searchForm.SerialNumber}的相关信息,请检查`)
      }

      this.LabelIssueList.push({
        PART_NO: res.data.PART_NO,
        WO_NO: res.data.WO_NO,
        PD_LINE: res.data.PD_LINE,
        SERIAL_NUMBER: this.searchForm.SerialNumber,
        ERRORCODE: res.data.ERRORCODE,
        ERROR_DESC: res.data.ERROR_DESC,
        PROCESS_NAME: res.data.PROCESS_NAME,
        TERMINAL_NAME: res.data.TERMINAL_NAME
      })
      this.searchForm.SerialNumber = ''
      this.searchForm.ErrorCode = ''
      document.getElementById('serialNumber').focus()
    },
    // 移除当前选中行
    removeFromWaitingList (serialNumber) {
      this.LabelIssueList.forEach(function (item, index, arr) {
        if (item.SERIAL_NUMBER === serialNumber) {
          arr.splice(index, 1)
        }
      })
    },
    actionChange () {
      // 如果是check in则显示要刷入errorcode 别的状态不需要刷入errorcode
      if (this.searchForm.Action === '' || this.searchForm.Action === 'Nokia CheckIn') {
        this.ErrorcodeVisable = true
      } else {
        this.ErrorcodeVisable = false
      }
    },
    // 将当前刷入的所有和当前状态全部到后台处理，修改SN在g_sn_status的状态 表示已经check in,check out等动作。在
    async batchAccordCurrentProcess () {
      const transferParam = {
        Do_Action: this.searchForm.Action,
        LabelIssueList: this.LabelIssueList,
        Operator: this.$store.state.loginId
      }
      const { data: res } = await this.$http.post('/Nokia/NokiaInfo/TransferDataIntoCheckInRoute', transferParam)
      if (res.meta.status !== '200') {
        return this.$message.error(`${this.searchForm.Action}进入失败.请检查`)
      }
      this.$message.success('过站成功')
      this.LabelIssueList = [] // 清空table
      document.getElementById('serialnumber').focus()
    }
  },
  created () {
    this.serachActionPermissionByID(this.$store.state.loginId)
  }
}

</script>

<style lang="less" scoped>
</style>
